<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户主页</title>
    <link rel="stylesheet" href="/css/element.css">
    <script src="/js/vue2.6.js"></script>
    <script src="/js/element.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/app.js"></script>
    <script src="/editor/js/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1">首页</el-menu-item>
        <!--        <el-submenu index="2">-->
        <!--            <template slot="title">我的工作台</template>-->
        <!--            <el-menu-item index="2-1">选项1</el-menu-item>-->
        <!--            <el-menu-item index="2-2">选项2</el-menu-item>-->
        <!--            <el-menu-item index="2-3">选项3</el-menu-item>-->
        <!--            <el-submenu index="2-4">-->
        <!--                <template slot="title">选项4</template>-->
        <!--                <el-menu-item index="2-4-1">选项1</el-menu-item>-->
        <!--                <el-menu-item index="2-4-2">选项2</el-menu-item>-->
        <!--                <el-menu-item index="2-4-3">选项3</el-menu-item>-->
        <!--            </el-submenu>-->
        <!--        </el-submenu>-->
        <el-menu-item index="3" ><a @click="locationfref('/page/add.html')">新建内容</a></el-menu-item>
        <el-menu-item index="4"><a @click="locationfref('/page/notemanager.html')">内容管理</a></el-menu-item>
    </el-menu>



    <div >
        <div align="center">
            <div style="width: 500px" >
                <div style="margin-top: 15px;">
                    <el-input placeholder="请输入内容"  v-model="keyword">
                        <el-button slot="append" @click="searchnote" id="search-btn" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
        </div>

        <br>
        <div style="padding-left: 350px">
            <div style="padding-left: 13px">
                <el-button-group>
                    <el-button type="primary" @click="adduser" icon="el-icon-edit">用户新增</el-button>
                    <el-button type="primary" @click="addrole" icon="el-icon-edit">角色新增</el-button>
                    <el-button type="primary" icon="el-icon-share"></el-button>
                    <el-button type="primary" icon="el-icon-delete"></el-button>
                </el-button-group>
            </div>
               <div style="padding: 20px">
                   <template>
                       <el-table
                               :data="tableData"
                               style="width: 100%"
                               height="600">
                           <el-table-column
                                   label="序号"
                                   width="150px">
                               <template slot-scope="scope">{{ scope.$index+1 }}</template>
                           </el-table-column>
                           <el-table-column
                                   label="账号"
                                   width="450px">
                               <template slot-scope="scope" ><a @click="locationppreview(scope.row.id)">{{ scope.row.username }}</a></template>
                           </el-table-column>
                           <el-table-column
                                   prop="realname"
                                   label="姓名"
                                   width="250px">
                           </el-table-column>
                           <el-table-column
                                   prop="phone"
                                   label="手机号"
                                   width="250px">
                           </el-table-column>
                           <el-table-column
                                   prop="createTime"
                                   label="创建时间"
                                   width="250px">
                           </el-table-column>
                           <el-table-column
                                   label="操作"
                                   width="200">
                               <template slot-scope="scope">
                                   <el-button @click="addroleuser(scope.row.id)" type="text" size="small">添加角色</el-button>
                                   <el-button type="text" @click="deleteNote(scope.row.id)" size="small">删除</el-button>
                               </template>
                           </el-table-column>
                       </el-table>
                       <el-pagination
                               background
                               @current-change="handleCurrentChange"
                               layout="prev, pager, next"
                               :total="total">
                       </el-pagination>
                   </template>
               </div>
        </div>
    </div>
    <br>

    <el-dialog title="新增账号" :visible.sync="dialogFormVisible" width="35%">
        <el-form :model="form">
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input style="width: 500px" v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input style="width: 500px" v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" :label-width="formLabelWidth">
                <el-input style="width: 500px" v-model="form.againpassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input style="width: 500px" v-model="form.realname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input style="width: 500px" v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址" :label-width="formLabelWidth">
                <el-input style="width: 500px" v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="新增角色" :visible.sync="dialogFormVisible1" width="30%">
        <el-form :model="role">
            <el-form-item label="角色名" :label-width="formLabelWidth1">
                <el-input style="width: 400px" v-model="role.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="submitrole">确 定</el-button>
        </div>
    </el-dialog>

</div>
<script>
    var Main = {
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1',
                total:0,
                tableData: [],
                keyword:'',
                form:{},
                dialogTableVisible: false,
                dialogFormVisible: false,//账号添加
                formLabelWidth: '120px',
                dialogFormVisible1:false ,//角色添加
                formLabelWidth1:'120px' ,//角色添加
                role:{}
            }
        },

        created(){
            api.GET('/admin/userlist',{'page':1,'size':10,'keyword':this.keyword},(result)=> {
                this.tableData=result.data.records;
                this.total=result.data.total;
            })
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            adduser(){
                this.dialogFormVisible = true
            },
            addroleuser(val){

            },
            submit(){
                if(this.form.password===this.form.againpassword){
                    api.POST('/admin/adduser',this.form,(result)=>{
                        console.log(result)
                    })
                }
            },
            addrole(){
                this.dialogFormVisible1=true;
            },
            submitrole(){
                if(this.role.name){
                    var data=api.URLAjax('post','/admin/addrole',{'roleName':this.role.name})
                    console.log(data)
                }
            },
            handleCurrentChange(val) {
                api.GET('/admin/userlist',{'page':val,'size':10,'keyword':this.keyword},(result)=> {
                    this.tableData=result.data.records;
                    this.total=result.data.total;
                })
            },
            locationfref(href){
                window.open(href);
            },
            locationppreview(id){
                window.open('/page/contentinfo.html?obj='+id)
            },
            searchnote(){
                api.GET('/admin/userlist',{'page':1,'size':10,'keyword':this.keyword},(result)=> {
                    this.tableData=result.data.records;
                    this.total=result.data.total;
                })
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    function keyDown() {
        var keycode = event.keyCode;
        var realkey = String.fromCharCode(event.keyCode);
        if(keycode==13){
            $("#search-btn").click();
        }
        // alert("按键码: " + keycode + " 字符: "+ realkey);

    }
    document.onkeydown = keyDown;
</script>
</body>
</html>